<template>
  <!-- 顶部标题 -->
  <view style="text-align: center; font-size: 36rpx; font-weight: bold; margin: 20rpx 0;">
    uni-app
  </view>

  <view style="padding: 20rpx; padding-top: 100rpx;">
    <!-- 输入值区域：添加flex布局让文字和输入框横向排列 -->
    <view class="text-area" style="margin-bottom: 20rpx; display: flex; align-items: center;">
      <text>输入值: </text>
      <!-- 输入框会自动排在文字后面 -->
      <input 
        type="text" 
        v-model="title" 
        style="background:#e5e5e5;color: red; border: 2px ; padding: 10rpx; width: 400rpx; margin-left: 10rpx;" 
      />
    </view>

    <!-- 回传值区域：同步添加flex布局 -->
    <view class="text-area" style="margin-bottom: 20rpx; display: flex; align-items: center;">
      <text>回传值: </text>
      <!-- 输入框自动排在文字后面 -->
      <input 
        type="text" 
        :value="callBackValue" 
        style="background: #e5e5e5; color: yellow; padding: 10rpx; width: 400rpx; border: none ; margin-left: 10rpx;" 
      />
    </view>

    <!-- 子组件A和B保持不变 -->
    <comA :intent="title" @sendValue="getComAValue"></comA>
    <comB :comAValue="comAValue" @callBackFun="callBack"></comB>
  </view>
</template>

<script>
import comA from '../compA.vue'
import comB from '../compB.vue'

export default {
  components: { comA, comB },
  data() {
    return {
      title: 'Hello', // 初始值设为Hello（对应截图）
      callBackValue: '0355-2765838', // 初始回传值（对应截图）
      comAValue: ''
    }
  },
  methods: {
    getComAValue(value) {
      this.comAValue = value
    },
    callBack(value) {
      this.callBackValue = value
    }
  }
}
</script>
<style>

</style>
